<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
	    <title>测试主页</title>
	    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
	    <meta name="apple-mobile-web-app-capable" content="yes">
	    <meta name="apple-mobile-web-app-status-bar-style" content="black">
	    <meta name="format-detection" content="telephone=no">

	    <meta name="renderer" content="webkit">
	    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

	    <!-- uc强制竖屏 -->
	    <meta name="screen-orientation" content="portrait">
	    <!-- QQ强制竖屏 -->
	    <meta name="x5-orientation" content="portrait">

	    <link rel="stylesheet" type="text/css" href="css/reset.css">
	    <link rel="stylesheet" type="text/css" href="css/test.css">	    
		
		<link type="text/css" rel="stylesheet" href="./css/lib/mobiscroll.my.v2.16.0.min.css">
		<script>
			var width = document.documentElement.clientWidth;
	        var Standard = 100 / (750 * 1.0 / width);
	        Standard = Standard > 100 ? 100 : Standard;
	        document.querySelector("html").style.fontSize = Standard + "px";
		</script>
    </head>
    <body>
		<header>
			<div class="clearfix">
				<div class="back"><a href="javascript:history.back();"></a></div>
				<div class="my_order"><span></span></div>
			</div>
		</header>

		<main>
			<div class="name bg_input"><input type="text" id="name" placeholder="您的姓名"></div>
			<div class="gender bg_input"><input type="button" id="gender" value="性别 : 男"></div>
			<div class="birth bg_input"><input type="text" id="date" placeholder="出生日期" /></div>

			<div class="my_lucky"></div>

		</main>


		<!-- <script src="js/test.js"></script> -->
	    <script type="text/javascript" src="js/lib/zepto.fastclick.doT.layer.min.js"></script>
		<script type="text/javascript" charset="utf-8" src="./js/lib/mobiscroll.my.v2.16.0.min.js"></script>
		<script>
			$(function(){
				if (typeof Stars == "undefined") {
				    var Stars = {};
				}
				Stars.test = {
					init: function(){
						var that = this;
						that.bindEvent();
					},
					variable: {
						placeholder: $('#name').prop('placeholder'), //占位符
						gender: '',		  //性别
						name: ''			//输入的名字
					},
					bindEvent: function (){
						var that = this;
						//输入姓名交互
						$('#name').focus(function() {
							$(this).prop('placeholder', '');						
						});
						$('#name').blur(function() {
							$(this).prop('placeholder', that.variable.placeholder);
							// that.variable.name = $('#name').val();
							// that.variable.name = that.variable.name.replace(/\s+/g, '');
							/*if( !that.variable.name ){
								//输入不合标准
								$(this).prop('placeholder', that.variable.placeholder);
							}*/
							// console.log(that.variable.name)
						});
						//切换性别
						$('#gender').click(function() {
							var gender = $(this).val();
							if( gender == "性别 : 男" ){
								$(this).val("性别 : 女");
							}else{
								$(this).val("性别 : 男");
							}
						});
						//选择出生年月
						$('#date').mobiscroll().datetime({
							animate: 'flip',
							rows: 5,
							height: 30,
							maxWidth: 55,
							minWidth: 50,
							theme: 'android-holo-light',
							mode:  'scroller',
							display: 'modal',
							lang:  'zh',
							minDate:  new Date(1910,1,1),
							maxDate: new Date(),
							// stepMinute: 2,
							dateFormat: 'yy年mm月dd日',
							dateOrder: 'yymmdd',
							defaultValue: new Date(1990, 7, 8, 8, 0)
						});
						$('.my_lucky').click(function () {
							var name = $('#name').val();
							var gender = $('#gender').val().slice(-1);
							var date = $('#date').val();
							var projectUrl = that.getProjectUrl('test.html');
							window.location = projectUrl + 'testResult_gradeOne.html';
						});
					},
					//获取到当前文件的项目路径，fileName:当前页面文件名
					getProjectUrl: function ( fileName ) {
						var protocol = window.location.protocol;
						var host = window.location.host;
						var pathname = window.location.pathname;
						pathname = pathname.replace( fileName, '');
						var projectUrl = protocol + '//' + host + pathname;
						return projectUrl;
					}


				};
				Stars.test.init();


				
	
				







			});
		</script>
		
    </body>
</html>